<script setup>

</script>

<template>
<div class="app">
  <div class="title">
    <h2><b>基础信息</b></h2>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" inline>
      <el-form-item label="车牌号" prop="licensePlate">
        <el-input v-model="form.licensePlate" placeholder="请输入车牌号" />
      </el-form-item>

      <el-form-item label="车型" >
        <el-select v-model="form.chexing" placeholder="请选择" clearable>
          <el-option label="请选择" value=""></el-option>
          <el-option label="小面" value="小面"></el-option>
          <el-option label="中面" value="中面"></el-option>
          <el-option label="微面" value="微面"></el-option>
          <el-option label="长途大车" value="长途大车"></el-option>
          <el-option label="冷藏车" value="冷藏车"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="车长">
        <el-select v-model="form.length" placeholder="请选择" clearable>
          <el-option label="请选择" value=""></el-option>
          <el-option label="4米2" value="4米2"></el-option>
          <el-option label="5米2" value="5米2"></el-option>
          <el-option label="6米8" value="6米8"></el-option>
          <el-option label="7米6" value="7米6"></el-option>
          <el-option label="9米6" value="9米6"></el-option>
          <el-option label="13米" value="13米"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="车辆颜色" prop="color">
        <el-input v-model="form.color" placeholder="请输入车辆颜色" />
      </el-form-item>

      <el-form-item label="车辆品牌" prop="brand">
        <el-input v-model="form.brand" placeholder="请输入车辆品牌" />
      </el-form-item>

      <el-form-item label="核定载客" prop="seatingCapacity">
        <el-input v-model="form.seatingCapacity" placeholder="请输入核定载客" />
      </el-form-item>

      <el-form-item label="核定体积" prop="cargoVolume">
        <el-input v-model="form.cargoVolume" placeholder="请输入核定体积" />
      </el-form-item>

      <el-form-item label="核载重量" prop="cargoWeigth">
        <el-input v-model="form.cargoWeigth" placeholder="请输入核载重量" />
      </el-form-item>

      <el-form-item label="出厂日期" prop="manufacturingDate">
        <el-date-picker clearable
                        v-model="form.manufacturingDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择出厂日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="车辆年限" prop="vehicleAge">
        <el-input v-model="form.vehicleAge" placeholder="请输入车辆年限" />
      </el-form-item>

      <el-form-item label="制造商" prop="manufacturer">
        <el-input v-model="form.manufacturer" placeholder="请输入制造商" />
      </el-form-item>

      <el-form-item label="车主" prop="did" >
        <el-select v-model="form.did" placeholder="请选择" clearable>
          <el-option
            v-for="option in options"
            :key="option.id"
            :label="option.name"
            :value="option.id"
          ></el-option>
        </el-select>
      </el-form-item>


<!--      <el-form-item label="车辆图片" prop="image">-->
<!--        <image-upload v-model="form.image"/>-->
<!--      </el-form-item>-->

      <el-form-item label="备注信息" prop="bei">
        <el-input v-model="form.bei" placeholder="请输入备注信息" />
      </el-form-item>

    </el-form>

    <div class="bao">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>

  </div>
</div>
</template>

<style >
.title {
  margin-left: 50px;
}
.bao{
  text-align: right;
  padding: 100px;
}

</style>

<script>
import {addVehiclemanagement,getVehiclemanagement, updateVehiclemanagement} from "@/api/vehiclemanagement/vehiclemanagement";
import { listDrivermanagement} from "@/api/drivermanagement/drivermanagement"
export default {
  data() {
    return {
      form: {
        did:''
      },
      options:[],
    }
  },

  created() {
    listDrivermanagement().then(response => {
      this.options = response.rows
    })
    console.log( this.$route.query.id+"....."+(this.$route.query.id!==undefined))
    if(this.$route.query.id!==undefined){
      this.findCustomer();
    }
  },

  methods: {
    cancel() {
      this.$router.push({ path: '/vehiclemanagementindex' })
    },
    //回显
    findCustomer(){
      var id = this.$route.query.id;
      getVehiclemanagement(id).then(response => {
        this.form = response.data;
      });
    },

    /** 保存按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateVehiclemanagement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              // this.open = false;
              // this.getList();
              this.$router.push({ path: '/vehiclemanagementindex' })
            });
          } else {
            addVehiclemanagement(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              // this.open = false;
              // this.getList();
              this.$router.push({ path: '/vehiclemanagementindex' })
            });
          }
        }
      });
    },

  }
}


</script>

